<!-- 使用例子：
示例1：<pb-graphic-verification ref="verification" :getGraphicCaptcha="getGraphicCaptcha" @finish="finish"></pb-graphic-verification>
示例2：<pb-graphic-verification ref="verification" :getGraphicCaptcha="getGraphicCaptcha" :validator="validator"></pb-graphic-verification>
示例3：<pb-graphic-verification verifyType="verify-slider" title="拼图安全验证" ref="verification" :getGraphicCaptcha="getGraphicCaptcha" :validator="validator" ></pb-graphic-verification>
//展示组件
this.$refs.verification.show = true

//获取图形校验码
async getGraphicCaptcha() {
	let res = {
		"code": 200,
		"data": {
			"img": "",
			"uuid": ""
		}
	}
	//接口调用获取图形校验码
	await xxxxx(url).then(data => {
		res.code = 200
		res.data.img = data.data.captcha_image
		res.data.uuid = data.data.captcha_key
	}).catch(() => {
		res.code = -1
		res.data.img = ''
		res.data.uuid = ''
	})
	
	return res
},

//实时图形校验
async validator(data) {
	//...调用接口执行图形校验
	let flag = false
	if(data.uuid) {
		await xxxx(url,{
			"code":data.code,
			"uuid":data.uuid,
			"phone":""
		}).then(res => {
			flag = true
			//'获取短信按钮置灰并倒计时'
		}).catch(()=>{
			flag = false
		})
	}else {
		uni.showToast({
			icon: 'none',
			title: '图形验证码无效'
		})
	}
	return flag
}

//图形校验延后
finish(e){
	console.log(JSON.stringify(e))//输出{"code":"2472","uuid":"ce8575aaf3ea4a5291d92ba2857a1fdc"}
}, 
-->
<template>
	<pb-popup ref="pbPopup" mode="center" round="24rpx" @open="open">
		<template #header>
			<view class="pb-flex-row pb-main-between pb-cross-center title">
				<view style="width: 120rpx;"></view>
				<text class="pb-expanded">{{title}}</text>
				<u-icon name="close" bold size="40rpx" style="text-align: end;" @click="close"></u-icon>
			</view>
		</template>
		<view class="pb-g-v-content">
			<template v-if="verifyType == 'verify-number'">
				<verify-number ref="verifyNumber" :validator="validator" :getGraphicCaptcha="getGraphicCaptcha"
					:errorCountReset="errorCountReset" @finish="finish"></verify-number>
			</template>
			<template v-else-if="verifyType == 'verify-slider'">
				<verify-slider :validator="validator" :getGraphicCaptcha="getGraphicCaptcha"
					:errorCountReset="errorCountReset" ref="verifySlider" @finish="finish"></verify-slider>
			</template>
		</view>
	</pb-popup>
</template>

<script>
	import verifyNumber from "./verify-number"
	import verifySlider from "./verify-slider.vue"
	import props from "./props/props.js"

	export default {
		name: "pb-graphic-verification",
		mixins: [props],
		props: {
			verifyType: {
				type: String,
				default: 'verify-number'
			},
			title: {
				type: String,
				default: '请输入图片中的字符'
			}
		},
		components: {
			verifyNumber,
			verifySlider
		},
		data() {
			return {
				show: false,
			};
		},
		watch: {
			show(e) {
				this.$refs.pbPopup.show = e
			}
		},
		methods: {
			open() {
				if (this.verifyType == 'verify-number') {
					this.$refs.verifyNumber.init()
				} else if (this.verifyType == 'verify-slider') {
					this.$refs.verifySlider.init()
				}
			},
			close() {
				uni.hideKeyboard()
				this.show = false
			},
			finish(parameter) {
				console.log('【pb-graphic-verification】finish=>' + JSON.stringify(parameter))
				uni.hideKeyboard()
				this.show = false
				this.$emit('finish', parameter)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pb-g-v-content {
		width: 640rpx;
		padding: 0 40rpx 40rpx 40rpx;
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		padding: 40rpx 40rpx 0 0;
	}
</style>